<template>
    <f7-page class="common-page has-bottom-btns">
        <f7-navbar>
            <f7-nav-left>
                <f7-link back icon-material="chevron_left" force></f7-link>
            </f7-nav-left>
            <f7-nav-title>维保记录</f7-nav-title>
            <f7-nav-right></f7-nav-right>
        </f7-navbar>

        <v-accordion title="维保信息" class="infoList noBorder" disabled>
            <van-form input-align="right" ref="form" :readonly="!canEdit">
                <van-field readonly :required="canEdit" clickable name="datetimePicker"
                    :value="models.model.maintenanceTime" label="维保时间" :rules="[{ required: true, message: '请选择维保信息' }]"
                    placeholder="请选择" :right-icon="canEdit ? 'arrow' : ''"
                    @click="canEdit ? (showPicker = true) : (showPicker = false)" />
                <van-field v-model="models.model.situation" :required="canEdit" label="维保情况"
                    :rules="[{ required: true, message: '请输入维保情况' }]" rows="3" autosize
                    :type="canEdit ? 'textarea' : ''" placeholder="请输入">
                </van-field>
                <van-field :required="canEdit" label="现场照片" readonly class="field-pic">
                </van-field>
                <qm-file-upload ref="maintainPic" :galleryOptions="{ multiple: true, maximum: 9 }" :disabled="!canEdit" v-if="models.model.maintenancenId"
                    :params="{
                type: 'attach',
                dataKey: models.model.maintenancenId,
                bizType: 'mobileMaintainPhoto',
            }" uploadId="maintainPic">
                </qm-file-upload>
            </van-form>
        </v-accordion>
        <f7-toolbar position="bottom" no-shadow class="fff" v-if="canEdit && !showPicker">
            <f7-button fill class="submit-btn" @click="onSubmit">提交</f7-button>
        </f7-toolbar>
        <van-popup v-model="showPicker" position="bottom">
            <van-datetime-picker type="date" @confirm="onConfirm" @cancel="showPicker = false" :min-date="minDate"
                :max-date="maxDate" :value="currentDate" />
        </van-popup>
    </f7-page>
</template>

<script>
import controller from "@/libs/framework/controller";

export default class instance extends controller {
    disableCache() {
        return true;
    }
    onInit() {
        this.context.registerId = this.$f7route.query.registerId;
        this.context.engineeId = this.$f7route.query.engineeId;
        this.context.pageAction = this.$f7route.query.pageAction;
    }
    onBeforeInit() {
        this.urls = {
            model: ["/app/equipment/eqmMobileMaintenancen/getEntity"]
        };
    }
    onAfterQuery(type, isSuccess, result) {
        if (type == "form") {
            if (result.pageAction == "create") {
                result.models.model.maintenanceTime = this.vm.$formatter.formatDate(
                    new Date(),
                    "yyyy-MM-dd"
                );
            }
        }
        return result;
    }
    mixin() {
        return {
            data() {
                return {
                    minDate: new Date(2024, 1, 1),
                    maxDate: new Date(2080, 12, 1),
                    currentDate: new Date(),
                    showPicker: false,// 选择日期
                    models: {
                        model: {
                            maintenancenId: '',
                            engineeId:''
                        }
                    },
                    pageAction: "",
                    registerId:'',
                    engineeId:''
                };
            },
            computed:{
                canEdit(){
                    return this.pageAction != 'view';
                }
            },
            methods: {
                // 维保时间 
                onConfirm(time) {
                    this.models.model.maintenanceTime = this.$formatter.formatDate(time, "yyyy-MM-dd");
                    this.showPicker = false;
                },
                //提交
                onSubmit() {
                    this.$refs.form.validate()
                        .then((res) => {
                            if (this.$refs.maintainPic.getUploadedCount() < 1) {
                                this.$toast("请上传现场照片")
                                return false
                            }
                            this.models.model.engineeId = this.engineeId;
                            this.models.model.registerId = this.registerId;
                            
                            this.$f7.request.post(
                                `/app/equipment/eqmMobileMaintenancen/save`, {
                                    model:this.models.model
                                },
                                (r) => {
                                    r = JSON.parse(r);
                                    if (r && r.success) {
                                        this.$f7.dialog.alert("提交成功", () => {
                                            this.$f7router.back();
                                        })
                                    } else {
                                        this.$toast(r.message || "提交失败，请稍后重试");
                                    }
                                },
                                (err) => { }
                            );
                        })
                }
            },
        };
    }
}
</script>

<style lang="less" scoped>
@import url("../../../../../../assets/css/commonPage.less");

@{deep} .v-workflow-list {
    padding: 0 16px;
}

@{deep}.accordion .accordion-item>.item-link>.item-content {
    padding-left: 16px !important;
}

@{deep}.accordion.accordion-list {
    background-color: #fff;
    margin-bottom: 10px;
}

@{deep}.list input[type="text"] {
    height: 22px;
}
@{deep}.field-pic.van-cell{
    &::after{
        border-bottom: none;
    }
}
</style>
